import React from 'react';
import {Table, Divider, Tag,Modal,Input, Tooltip, Icon, } from 'antd';
import "../../../style/public.css"
const confirm = Modal.confirm;
class ExampleTable extends React.Component {
    constructor(props) {//   构造函数
        super(props);
        this.state = {
            dataSource: [{
                key: '1',
                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
                tags: ['nice', 'developer'],
            }, {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
                tags: ['loser'],
            }, {
                key: '3',
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
                tags: ['cool', 'teacher'],
            }],
            nameMsg:'',
            ageMsg:'',
            addressMsg:'',
            tagsMsg:[],
            tags: [],
            inputVisible: false,
            inputValue: '',
        };

        this.onDelete = this.onDelete.bind(this);
        this.editMsg = this.editMsg.bind(this);
        this.columns =  [{
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: text => <span>{text}</span>,
        }, {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        }, {
            title: '标签',
            key: 'tags',
            dataIndex: 'tags',
            render: tags => (
                <span>
                  {tags.map(tag => {
                      let color = tag.length > 5 ? 'geekblue' : 'green';
                      if (tag === 'loser') {
                          color = 'volcano';
                      }
                      return <Tag color={color} key={tag}>{tag.toUpperCase()}</Tag>;
                  })}
                </span>
            ),
        }, {
            title: '操作',
            key: 'action',
            render: (text, record,index) => (
                <span>
                  <span className="cur_pointer" onClick={this.editMsg.bind(this,record)}>编辑</span>
                  <Divider type="vertical"/>
                  <span className="cur_pointer" onClick={this.onDelete.bind(this,index)}>删除</span>
                </span>
            ),
        }];
    }

    onDelete(index){
        let _this = this
        const dataSource = [...this.state.dataSource];
        confirm({
            title: '删除提示',
            content: '确定删除本条信息吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                dataSource.splice(index, 1);
                _this.setState({ dataSource });
            }
        });
    }

    changeTags(tags){
        this.setState({tags: tags})
    }

    editMsg(item) {
        let _this = this
        Modal.confirm({
            title: '修改信息',
            okText: '确定',
            cancelText: '取消',
            content: (
                <div className="editForm">
                    <Input className="m_t_20" addonBefore="姓名" defaultValue={item.name} id="nameMsg" />
                    <Input className="m_t_20" addonBefore="年龄" defaultValue={item.age}  id='ageMsg' />
                    <Input className="m_t_20" addonBefore="地址" defaultValue={item.address} id="addressMsg" />
                    <div className="m_t_20">
                        <span className="tagsSpan m_r_16">标签</span>
                        <EditableTagGroup  tags={item.tags} changeTags={(tags)=> {this.changeTags(tags)}}/>
                    </div>
                </div>
            ),
            onOk() {
                let nameMsg = document.getElementById('nameMsg').value;
                let ageMsg = document.getElementById('ageMsg').value;
                let addressMsg = document.getElementById('addressMsg').value;
                _this.state.dataSource.forEach((i) => {
                    if(i.key === item.key){
                        i.name = nameMsg
                        i.age = ageMsg
                        i.address = addressMsg
                        i.tags =_this.state.tags.length > 0 ? _this.state.tags : item.tags
                    }
                })
                const dataSource = [..._this.state.dataSource];
                _this.setState({ dataSource });
                _this.state.tags = []
                _this.setState({ dataSource });
            }
        });
    }

    render() {
        return (
            <div>
                <Table columns={this.columns} dataSource={this.state.dataSource} />
            </div>
        )
    }

}

class EditableTagGroup extends React.Component {
    state = {
        tags: this.props.tags,
        inputVisible: false,
        inputValue: '',
    };

    handleClose = (removedTag) => {
        const tags = this.state.tags.filter(tag => tag !== removedTag);
        this.setState({ tags });
        this.props.changeTags(tags)
    }

    showInput = () => {
        this.setState({ inputVisible: true }, () => this.input.focus());
    }

    handleInputChange = (e) => {
        this.setState({ inputValue: e.target.value });
    }

    handleInputConfirm = () => {
        const state = this.state;
        const inputValue = state.inputValue;
        let tags = state.tags;
        if (inputValue && tags.indexOf(inputValue) === -1) {
            tags = [...tags, inputValue];
        }
        this.setState({
            tags,
            inputVisible: false,
            inputValue: '',
        });
        this.props.changeTags(tags)
    }

    saveInputRef = input => this.input = input

    render() {
        const { tags, inputVisible, inputValue } = this.state;
        return (
            <div>
                {tags.map((tag, index) => {
                    const isLongTag = tag.length > 20;
                    const tagElem = (
                        <Tag key={tag} closable afterClose={() => this.handleClose(tag)}>
                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                        </Tag>
                    );
                    return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
                })}
                {inputVisible && (
                    <Input
                        ref={this.saveInputRef}
                        type="text"
                        size="small"
                        style={{ width: 78 }}
                        value={inputValue}
                        onChange={this.handleInputChange}
                        onBlur={this.handleInputConfirm}
                        onPressEnter={this.handleInputConfirm}
                    />
                )}
                {!inputVisible && (
                    <Tag
                         onClick={this.showInput}
                        style={{ background: '#fff', borderStyle: 'dashed' }}
                    >
                        <Icon type="plus" /> 添加
                    </Tag>
                )}
            </div>
        );
    }
}

export default ExampleTable
